import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import styles from "./OpsItem.module.less";
import { createAction } from "@common/utils";
import { PUSH_PAGE_STACK } from "@store/global-state/action-types";

const OpsItem = (props) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const switchPage = () => {
    let path = `/app${props.item.path}`;
    navigate(path);
    dispatch(createAction(PUSH_PAGE_STACK, path));
  };

  const handleClick = () => {
    if (props.item?.path) {
      if (props.item?.loadDataFunc) {
        props.item.loadDataFunc(() => switchPage());
      } else {
        switchPage();
      }
    }
  };

  return (
    <div className={styles["icon-wrapper"]} onClick={handleClick}>
      <div
        className={styles["icon-box"]}
        style={{ backgroundColor: props.item?.bgColor }}
      >
        <i className={`iconfont icon-${props.item?.icon}`} />
      </div>
      <div className={styles["icon-title"]}>{props.item?.title}</div>
      {props.todoNum ? <div className={styles["icon-badge"]}>5</div> : null}
    </div>
  );
};

OpsItem.propTypes = {
  item: PropTypes.object,
};

export default OpsItem;
